<template>
	    <view>
			<view class="zhu">
				<!-- 轮播 -->
				<view class="lunbo">
					<swiper
							class="tu1" 
							:indicator-dots="true" 
							:autoplay="true"
							 :interval="3000"
							  :duration="1000"
							  :circular="true"
							 
							  >
								<swiper-item  v-for="(item,index) in lunbotu">
									<view ><image :src="ip+item.lb_imgsrc" mode=""></image></view>
								</swiper-item>
							</swiper>
				</view>
				<!-- 搜索、扫码 -->
				<view class="hed">
					   <text class="iconfont icon-iconfontscan"></text>
					   <view class="iput" @click="sousuo">
						    <text class="iconfont icon-sousuo"></text>
						    <input type="text" value="" />
					   </view>
				</view>
			</view>
			<!-- 标牌 -->
			<view class="biao">
				<view><text class="iconfont icon-anquanyinsi"></text>正品保证</view>
				<view><text class="iconfont icon-anquanyinsi"></text>厂家授权</view>
				<view><text class="iconfont icon-anquanyinsi"></text>隐私包装</view>
			</view>
			<!-- 横条 -->
			<view class="hengtiao"></view>
			<!-- 选项卡 -->
			<view class="xuanxiang">
				    <view class="xuanxiang1" @click="dui">
						<view class="tubiao1"><text class="iconfont icon-Magnifier"></text></view>
						<view>对症找药</view>
					</view>
					<view class="xuanxiang1" @click="jing" >
						<view class="tubiao1" id="xuanxiang2"><text class="iconfont icon-shijian"></text></view>
						<text>劲爆秒杀</text>
					</view>
					<view class="xuanxiang1" @click="zhe">
						<view class="tubiao1" id="xuanxiang3"><text class="iconfont icon-pintuan"></text></view>
						<text>折扣拼团</text>
					</view>
					<view class="xuanxiang1" @click="yong">
						<view class="tubiao1" id="xuanxiang4"><text class="iconfont icon-zhaoyaoshi"></text></view>
						<text>用药咨询</text>
					</view>
			</view>
			<!-- 横条 -->
			<view class="hengtiao"></view>
			<!-- 限时购 -->
			<view>
				<!-- 促销时间 -->
				<view class="biaoti">
					   <text>限时购</text>
					   <text>1天 23：23：41</text>
				</view>
				<!-- 商品 -->
				<swiper
						class="shang"
						  >
					<swiper-item class="shang11">
						<view class="shang1"
						v-for="item in xianshi1"
						:key="yp_id"
						 @click="tiao(item)"
						>
						   <view class="shangtu"><image :src="ip+item.yp_imgsrc"></image></view>
						  <text>{{item.yp_mingcheng}}</text>
						 <view class="zekou">
						 								     <view>￥{{item.yp_zkjiage}}</view>
						 									 <view class="huadiao">
																 <view>￥{{item.yp_jiage}}</view>
																 <view class="xian"></view>
															 </view>
						 </view>
						  <progress class="xiaoshou" :percent="item.yp_yishou"  stroke-width="3" />
						  <text>已售{{item.yp_yishou}}%</text>
					</view>
					
					
					</swiper-item>
					<swiper-item class="shang11">
						<view class="shang1"
						v-for="item in xianshi2"
						:key="yp_id"
						 @click="tiao(item)">
							   <view class="shangtu"><image :src="ip+item.yp_imgsrc" ></image></view>
							  <text>{{item.yp_mingcheng}}</text>
							  <view class="zekou">
								     <view>￥{{item.yp_zkjiage}}</view>
									 <view class="huadiao">
									 	 <view>￥{{item.yp_jiage}}</view>
									 	 <view class="xian"></view>
									 </view>
							  </view>
							  <progress class="xiaoshou" :percent="item.yp_yishou"  stroke-width="3" />
							  <text>已售{{item.yp_yishou}}%</text>
						</view>
					</swiper-item>
				</swiper>
				<!-- 横条 -->
				<view class="hengtiao"></view>
				<!-- 促销专区 -->
				<view >
					<view class="biaoti">
						   <text style="color: #333333;">促销专区</text>
					</view>
					<view class="zhuanqu">
						<view class="zhuanqu1"
						@click="chu"
						>
							  <text>慢病用药</text>
							   <image :src="ip+chuxiao[0].lb_imgsrc" mode=""></image>
							   <text>满60减10</text>
						</view>
						<view class="zhuanqu1" id="zhuanqu1"
						@click="chu">
							  <text>儿童用药</text>
							   <image :src="ip+chuxiao[1].lb_imgsrc" mode=""></image>
							   <text id="man20">满100减20</text>
						</view>
					</view>
				</view>
	
				<!-- 横条 -->
				<view class="hengtiao"></view>
				<!-- 好药推荐 -->
				<view class="haoyao">
					<view class="biaoti">
						   <text style="color: #333333;">好药推荐</text>
						   <view class="yao"
						   v-for="item in haoyao" :key="item.yp_id"
						   @click="tiao(item)"
						   >
						   	      <view class="yaoping">
						   	      	   <view class="yaotu">
						   	      	   	   <image :src="ip+item.yp_imgsrc" mode=""></image>
						   	      	   </view> 
									   <view >
									   	   <view>{{item.yp_mingcheng}}</view>
										   <view class="yaojiesao">￥{{item.yp_jiage}}</view>
									   </view>
						   	      </view>
						   </view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import {reactive,toRefs,onMounted} from "vue"
	import http from "../../utils/http.js"
	import store from '../../store/index.js'
	import {mapState,useStore} from 'vuex'
	export default {
		setup(){
			const {state,getters,commit,dispatch} = useStore();
			let data=reactive({
				token:"",
			    lunbotu:[],
				ip:"http://localhost:8088",
				haoyao:[],  //好药推荐
				xianshi1:[],  //限时折扣
				xianshi2:[],  //限时折扣2
				chuxiao:[{lb_imgsrc:"1111"},{lb_imgsrc:"111"}],
				 sousuo:()=>{
					 uni.navigateTo({
					 	url:"../result/result"
					 });
				 },
				 dui:()=>{
					 uni.switchTab({
					 	url: "../classification/classification"
					 });
				 },//对症找药
				 jing:()=>{
					 uni.navigateTo({
					 	url: "../meskill/meskill"
					 });
				 },//劲爆秒杀
				 zhe:()=>{
					 uni.navigateTo({
					 	url: "../DiscountGroup/DiscountGroup"
					 });
				 },//折扣拼团
				 yong:()=>{
					 uni.navigateTo({
					 	url: "../classification-pharmacist/classification-pharmacist"
					 });
				 },//用药咨询
				 chu:()=>{
					 let arr=[];
					 for(let i=0;i<data.haoyao.length;i++){
					  arr.push({
					      id: data.haoyao[i].yp_id,
					      tit: data.haoyao[i].yp_mingcheng,
					      qian: data.haoyao[i].yp_jiage,
					      gg: data.haoyao[i].yp_guige,
					      img: data.haoyao[i].yp_imgsrc,
					      bo: data.haoyao[i].yp_lubosrc,
					      shuo:data.haoyao[i].yp_shuomingsrc,
					  	wh:data.haoyao[i].yp_pizhunwenhao,
					  	gn:data.haoyao[i].yp_zhuzhigongneng,
					  	yf:data.haoyao[i].yp_yunfei,
					  	yfyl:data.haoyao[i].yp_yongfayongliang
					  })
					
					 }
					 store.commit('classification/so',arr)
					 console.log(arr)
					 uni.navigateTo({
					 	url:"../classification-list/classification-list"
					 })
				 },
				 tiao:(i)=>{
					 console.log(i)
					 // let v={
						//  id:i.yp_id,
						//  tit:i.yp_mingcheng,
						//  qian:"50",
						//  gg:"100",
						//  img:i.yp_imgsrc
					 // }
					 let v={
					 						 bo: i.yp_lubosrc,
					 						 gg: i.yp_guige,
					 						 gn: i.yp_zhuzhigongneng,
					 						 id: i.yp_id,
					 						 img: i.yp_imgsrc,
					 						 qian: i.yp_jiage,
					 						 shuo: i.yp_shuomingsrc,
					 						 tit: i.yp_mingcheng,
					 						 wh: i.yp_pizhunwenhao,
					 						 yf: i.yp_yunfei,
					 						 yfyl: i.yp_yongfayongliang,
					 }
					 // console.log(v)
					 commit('classification/soo',v)
					 uni.navigateTo({
					 	url:"/pages/classification-Details/classification-Details"
					 })
				 }
			})
			onMounted(()=>{
				// console.log("state.userID",state.userID)
				uni.getStorage({
					key: 'token',
					success: function (res) {
						// console.log(res.data);
					     data.token=res.data
					}
				})
				// 促销图
				http({
					url:'/APPlunbo3',
					method:"get",
					data:{
						token:data.token
					}
				}).then((res)=>{
					// console.log(res.data.data)
					data.chuxiao=res.data.data
				}).catch((err)=>{
					console.log(err)
				})
				// 轮播图
				http({
					url:'/APPlunbo',
					method:"get",
					data:{
						token:data.token
					}
				}).then((res)=>{
					// console.log(res.data.data)
					data.lunbotu=res.data.data
				}).catch((err)=>{
					console.log(err)
				})
				// 好药推荐
				http({
					url:'/APPhaoyao',
					method:"get",
					data:{
						token:data.token
					}
				}).then((res)=>{
					// console.log(res.data.data)
					data.haoyao=res.data.data
				}).catch((err)=>{
					console.log(err)
				})
				// 限时折扣
				http({
					url:'/APPxianshi1',
					method:"get",
					data:{
						token:data.token
					}
				}).then((res)=>{
					// console.log(res.data.data)
					data.xianshi1=res.data.data
				}).catch((err)=>{
					console.log(err)
				})
				// 限时折扣2
				http({
					url:'/APPxianshi2',
					method:"get",
					data:{
						token:data.token
					}
				}).then((res)=>{
					// console.log(res.data.data)
					data.xianshi2=res.data.data
				}).catch((err)=>{
					console.log(err)
				})
			})
			return {...toRefs(data)}
		}
	}
</script>


<style lang="scss" scoped>
	@import url("~@/static/fonts/iconfont.css");
	    .zhu{
			width: 750rpx;
			height: 400rpx;
			position: relative;
		}
		.lunbo{
			position: absolute;
			top: 0;
			left: 0;
		    	
		}
		.tu1{
			width: 750rpx;
			height: 400rpx;
		}
		.tu1 image{
			width: 750rpx;
			height: 400rpx;
		}
		.hed{
			width: 750rpx;
			height: 80rpx;
			line-height: 70rpx;
			position: absolute;
			top: 20rpx;
			left: 0;
			display: flex;
			z-index: 999;
		}
		.hed >text{
			font-size: 2rem;
		}
		.iput{
			position: relative;
			display: flex;
			width: 600rpx;
			height: 70rpx;
			// border: 1rpx solid red;
		}
		.iput >text{
			position: absolute;
			display: inline-block;
			width: 100rpx;
			height: 70rpx;
			background-color: #FFFFFF;
			border-radius:  20rpx 0 0 20rpx;
			font-size: 1.5rem;
			text-align: center;
		}
		.iput > input{
			position: absolute;
			left: 90rpx;
			margin-left: 10rpx;
			width: 570rpx;
			height: 70rpx;
			background-color: #FFFFFF;
			border-radius: 0 20rpx 20rpx 0;
		}
		.biao{
			width: 750rpx;
			height: 50rpx;
			line-height: 50rpx;
			display: flex;
			justify-content: space-around;
		}
		.hengtiao{
			width: 750rpx;
			height: 20rpx;
			background-color: #e8e8e8;
		}
		.xuanxiang{
			display: flex;
			justify-content: space-around;
			width: 750rpx;
			height: 240rpx;
			// line-height: 240rpx;
			// border: 1rpx solid red;
		}
		.biaoti{
			width: 750rpx;
			height: 70rpx;
			line-height: 70rpx;
			// border: 1rpx solid red;
		}
		.biaoti >text:first-child{
			margin-left: 20rpx;
			margin-right: 60rpx;
			font-size: 1.1rem;
		}
		.biaoti >text:last-child{
			color: red;
		}
		.shang{
			width: 750rpx;
			height: 400rpx;
		}
		.shang11 {
			width: 750rpx;
			height: 400rpx;
			display: flex;
		}
		.shang1{
			width: 250rpx;
			height: 400rpx;
			// border: 1rpx solid red;
			text-align: center;
		}
		.shangtu{
			width: 250rpx;
			text-align:center;
		}
		.shangtu > image {
			width: 180rpx;
			height: 250rpx;
		}
		.zekou{
			width: 190rpx;
			display: flex;
			margin-left: 30rpx;
			justify-content: space-between;
		}
		.zekou >text {
			// display: inline-block;
		}
		.huadiao{
			width: 95rpx;
			position: relative;
		}
		.huadiao >view{
			position: absolute;
			right:0;
		}
		.xian{
			top: 19rpx;
			width: 65rpx;
			height: 3rpx;
			background-color: #000000;
		}
		.xiaoshou{
			width: 200rpx;
			margin-left: 25rpx;
			
		}
		.zhuanqu{
			width: 750rpx;
			height: 240rpx;
			display: flex;
			justify-content: space-around;
		}
		.zhuanqu1{
			position: relative;
			width: 350rpx;
			height: 200rpx;
			background-color: #7eeaff;
			border-radius: 15rpx;
			border: 1rpx solid #dddfdd;
		}
		#zhuanqu1{
			background-color: #ff94b1;
		}
		.zhuanqu1 >image{
			position: absolute;
			left: 220rpx;
			top: 50rpx;
			width: 100rpx;
			height: 70rpx;
		}
		.zhuanqu1 >text:first-child{
			top: 50rpx;
			left:50rpx;
			position: absolute;
			font-size: 1.1rem;
			display: inline-block;
		}
		.zhuanqu1 >text:last-child{
			position: absolute;
			top: 110rpx;
			left: 40rpx;
			width: 150rpx;
			height: 50rxp;
			text-align: center;
            line-height: 50rpx;
			display: inline-block;
			background-color: #5db1ff;
			border-radius: 15rpx;
			color: #FFFFFF;
			font-size:0.7rem
		}
		.yaoping{
			margin-top: 10rpx;
			width: 750rpx;
			height: 240rpx;
			display: flex;
			// border: 1rpx solid red;
			border-bottom: 1rpx solid #808080;
		}
		.yaotu{
			width: 250rpx;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
            // border: 1rpx solid red;
		}
		.yaotu >image{
			margin-top: 20rpx;
			width:180rpx;
			height: 180rpx;
			
		}
		.yaojiesao{
			color: red;
		}
		.xuanxiang1{
			width: 150rpx;
			height: 200rpx;
			// border: 1rpx solid red;
			text-align: center;
		}
		.xuanxiang1>view:nth-child(1){
			// display: inline-block;
			margin-left: 25rpx;
			margin-top: 30rpx;
			margin-bottom: 15rpx;
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			background-color: red;
			border-radius: 50rpx;
			// margin-top: 30rpx;
			// border: 1rpx solid red;
		}
		.tubiao1 >text{
			font-size: 2.3rem;
			color: #FFFFFF;
		}
	   #xuanxiang2{
		   background-color: #007AFF;
	   }
	   #xuanxiang3{
	   		   background-color: #ffaa00;
	   }
	   #xuanxiang4{
	   		   background-color: #ff00ff;
	   }
	   #man20{
		   background-color: #ff797b;
	   }
</style>
